<template>
  <div id="coupon_store">
    <c-title :hide="false" text="领券中心"></c-title>
    <div class="banner">
      <!--indicator-color="white"-->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :loop="true" :show-indicators="false">
        <van-swipe-item v-for="(item, i) in slide_shows" :key="i">
          <img :src="item.pic_url" alt="" @click="toRouteLink(item.slide_link)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-sticky :offset-top="40" >
      <div class="coupon-classify" ref="handpickList"  style="overflow: hidden;">
        <div class="activity-scroll">
          <li  v-for="(item, index) in types" :key="index" @click="setTypesIndex(index,item)" :class="index == tabIndex?'on':''">{{ item.name }}</li>
        </div>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
      <div class="coupon-list" v-if="coupon_list && coupon_list.length > 0">
        <block v-for="(item, index) in coupon_list" :key="index">
          <yzSubscribe
            v-on:confirm="confirmSub($event, item, index)"
            v-on:error="errorSub($event, item, index)"
            :tagName="'coupon_center'"
            :styleWidth="'width: 400px'"
            :styleSubWidth="'400px'"
            :styleHeight="'120px'"
            :couponHeight="'120px'"
          ></yzSubscribe>
          <coupon-cell :couponItem="item" :index="index">
            <template #integral>
              <div class="integral" v-if="item.isIntegralExchange">{{item.exchange_coupon_integral}}{{ integral_plugin_name }}</div>
            </template>
            <template #assignNum>
              <div class="assign-num">
                <span>已领人数：{{item.has_many_member_coupon_count}}人</span>
                <span v-show="item.api_remaining != -1">可领张数：{{ item.api_remaining }}张</span>
                <span v-show="item.api_remaining == -1">可领张数：多张</span>
              </div>
            </template>
            <template #couponBtn>
              <div v-if="item.api_availability == 2 || item.api_availability == 3" style="width: 2.875rem;flex-shrink: 0;"></div>
              <div v-if="item.api_availability == 2 || item.api_availability == 3" class="avail-tag">
                {{item.api_availability == 2?'已领取':'已抢光'}}
              </div>
              <div v-else class="couponBtn-flex flex">
                <div  v-if="item.isIntegralExchange" >
                  <div class="coupon-btn" @click="showIntegralExchange(item, index)">去兑换</div>
                </div>
                <div class="coupon-btn" @click="selectedcoupon(item, index)" v-else>立即领取</div>
              </div>
            </template>
            <template #explain>
              <div v-if="item.api_limit && (item.api_availability == 2 || item.api_availability == 3)" class="explain">
                <p>{{ item.api_limit | escapeTitle }}</p>
              </div>
            </template>
          </coupon-cell>
        </block>
      </div>
      <van-empty description="暂无数据" v-else/>
    </van-pull-refresh>
    <div class="mb-50"></div>
    <div class="posbtn" @click="toStore">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons_mycouponsbg@2x.png" alt="" />
    </div>

    <!-- 积分兑换优惠券 -->
    <van-dialog
      v-model="showIntegralPopup"
      :title="`${integral_plugin_name}兑换优惠券`"
      round
      width="75%"
      show-confirm-button
      show-cancel-button
      confirm-button-text="兑换"
      confirm-button-color="var(--themeBaseColor)"
      @confirm="exchangeCoupon">
      <div class="share-main">
        <div class="flex-a-c flex-j-sb">
          <div class="title">兑换张数</div>
          <van-stepper v-model="exchangeForm.couponTotal"   theme="round" button-size="24"  disable-input  />
        </div>
        <p>需要{{ exchangeForm.couponTotal * exchangeForm.exIntegral }}{{ integral_plugin_name }}</p>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import coupon_infocontroller from "./coupon_storecontroller";

export default coupon_infocontroller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/css/coupon_index.scss";
@import "../../assets/css/coupon_centen.scss";
#coupon_store ::v-deep .van-dialog__header {
  font-size: 1rem;
  font-weight: bold;
  color: #00001C;
  padding: 1.125rem 0 0 0;
}

.share-main ::v-deep .van-stepper {
  padding:1.3125rem 0 0.625rem 0;
}
.share-main ::v-deep  .van-stepper--round .van-stepper__minus {
  color:var(--themeBaseColor);
  border: 0.0625rem solid var(--themeBaseColor);
}
.share-main ::v-deep  .van-stepper--round .van-stepper__minus::before {
  background-color: var(--themeBaseColor);
}
.share-main ::v-deep  .van-stepper--round .van-stepper__plus {
  background-color: var(--themeBaseColor);
}
#appMain .pcStyle #coupon_store ::v-deep .posbtn {
  right:50%;
}
.pcStyle .posbtn {
  right:39%;
}
//新样式
.banner {
  margin:0.625rem 0.75rem 0 0.75rem;
  .my-swipe {
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    .van-swipe-item {
      border-radius: 0.625rem;
    }
  }
  img {
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  }
}
.coupon-classify {
  padding:0.75rem 0 0.9375rem 0.9375rem;
  position: relative;
  background-color: #F5F5F5;
  .activity-scroll {
    display: inline-block;
    white-space: nowrap;
    padding:0 0 0 0.9375rem;
      li {
        background: #FFFFFF;
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        padding:0.375rem 0.75rem;
        color: #3B3B4A;
        margin:0 0.625rem 0 0;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        min-width: 3.125rem;
        box-sizing: border-box;
      }
      .on {
        border: 0.0625rem solid var(--themeBaseColor);
        color:var(--themeBaseColor);
        position: relative;
        &::after {
          content: "";
          width:100%;
          height: 100%;
          background-color: var(--themeBaseColor);
          opacity: 0.1;
          position: absolute;
          left:0;
          top:0;
        }
      }
    }
}
.coupon-list {
  margin:0 0.75rem;
  .shop-coupon {
    background-color: #fff;
    .coupon-wrap {
      .assign-num {
        font-size: 0.75rem;
        color: #6E6E79;
        padding:0.3125rem 0 0 0;
        text-align: left;
        span {
          &:first-child {
            padding: 0 0.5rem 0 0;
          }
        }
      }
      .couponBtn-flex {
        align-self: flex-end;
      }
      .coupon-btn {
        align-self: flex-end;
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: #FFFFFF;
        padding:0.5rem 0.5625rem;
        border-radius: 0.875rem 0.875rem 0.875rem 0.875rem;
        background-color: var(--themeBaseColor);
        min-width: 4.125rem;
        margin:0 0 0 0.4375rem;
      }
      .integral {
        color:var(--themeBaseColor);
        font-size: 0.75rem;
        padding:0 0 0 0.375rem;
      }
      .avail-tag {
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        padding:0.3125rem 0.6875rem 0.4375rem 0.6875rem;
        border-radius: 0rem 0.625rem 0rem 0.875rem;
        color: var(--themeBaseColor);
        position: absolute;
        top:0;
        right:0;
        &::after {
          content: '';
          width:100%;
          height: 100%;
          background: var(--themeBaseColor);
          opacity: 0.1;
          position: absolute;
          z-index: -1;
          left:0;
          top:0;
          border-radius: 0rem 0.625rem 0rem 0.875rem;
        }
      }
    }
    .explain {
      background: #FFFFFF;
      font-size: 0.75rem;
      line-height: 1rem;
      color: #AAAAB3;
      text-align: left;
      padding:0.625rem 0.625rem 0.4375rem 0.625rem;
      border-radius: 0rem 0rem 0.625rem 0.625rem;
    }
  }


}
.mb-50 {
  height: 9.375rem;
  clear: both;
}

.share-main {
  margin: 0 0.75rem;
  .title {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #00001C;
  }
  p {
    color:var(--themeBaseColor);;
    font-weight: 400;
    font-size: 0.75rem;
    text-align: left;
    padding:0 0 1.6875rem 0;
  }
}

.posbtn {
  position: fixed;
  bottom: 5rem;
  right:-1.25rem;
  z-index: 999;
  // width: 60.48px;
  img {
    width: 7.875rem;
  }

  div {
    border-radius: 0.3125rem;
    text-align: center;
    font-size: 0.75rem;
    background: #fb605f;
    padding: 3.2px 4.8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
